<script setup lang="ts">
// 右击菜单显示代理

const menu = ref<HTMLElement>()
// 控制窗口是否可拖动，以及隐藏菜单栏的显示隐藏
const isDrag = ref(true)
const menuClickItem: (event: MouseEvent, obj?: object) => void = (event) => {
  // 打开右击菜单
  const node = event.target as HTMLElement
  // const {x, y} = event
  if (menu.value) {
    if (node.classList.contains('mark_message')) {
      isDrag.value = false
      const body = document.body.querySelector('#container')
      if (menu.value) {
        if (body && node.clientHeight + event.y > body.clientHeight - 50) {
          menu.value.style.bottom = `10px`
          menu.value.style.top = ``
        } else {
          menu.value.style.top = `${event.y}px`
          menu.value.style.bottom = ``
        }
        menu.value.style.left = `${event.x}px`
      }
    } else {
      isDrag.value = true
    }
  }
}
const cancelMenu = () => {
  !isDrag.value && (isDrag.value = true)
}
const route = useRoute()
const router = useRouter()
const openOtherWindow = () => {
  if (window.ipcRenderer) {
    window.ipcRenderer.send('open-other-window')
    console.log(route, 'route')
    console.log(router, 'router')
    console.log(window.location.href)
  }
}
</script>

<template>
  <!--  侦听整个窗口的右键操作-->
  <div id="container" @contextmenu="menuClickItem" @click="cancelMenu">
    <div class="left-content">
      <LeftSlide :class="{ele_drag:isDrag}" @click="cancelMenu"/>
    </div>
    <div class="right-content">
      <SlibarTop class="top" ref="rightTopBar" :class="{ele_drag:isDrag}"/>
      <router-view class="content"/>
    </div>
    <!--    此处将右键菜单外置，方便操作-->
    <div class="menu" ref="menu" :class="{show:!isDrag,hidden:isDrag}">
      <ElButton type="primary" @click="openOtherWindow">打开新窗口聊天</ElButton>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.menu {
  background-color: rgb(48, 48, 48);
  width: 180px;
  height: 120px;
  position: absolute;

  &.hidden {
    opacity: 0;
    z-index: -9999;
  }

  &.show {
    opacity: 1;
    z-index: 1000;
  }
}

#container {
  display: flex;
  justify-content: start;
  box-sizing: border-box;
  position: relative;

  .left-content {
    min-width: 10%;
    backdrop-filter: blur(40px);

  }

  .right-content {
    flex: 1;
    padding-top: 25px;
    overflow: hidden;

    .content {
      width: 100%;
    }

    .top {
      width: calc(100% - 10%);
      position: fixed;
      z-index: 999;
      top: 0;
      right: 0;
    }
  }
}
</style>
